<template>
  <div class="contain">
    <div class="m-itemize">
      <div class="itemize-contain">
        <span class="itemize-name">状态</span>
        <ul class="itemize-list">
          <li v-for="(item,index) in statusTab"
              :key="index"
              class="itemize-total"
              :class="{ active: statusSel === index }"
              @click="changeTab('statusSel',index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="itemize-contain">
        <span class="itemize-name">热度</span>
        <ul class="itemize-list">
          <li v-for="(item,index) in hotTab"
              :key="index"
              class="itemize-total"
              :class="{ active: hotSel === index }"
              @click="changeTab('hotSel',index)"
          >
            {{ item }}
          </li>

        </ul>
      </div>
    </div>
    <!--搜索结果-->
    <div class="m-result-contain">
      <ul>
        <li
            class="activity-intro"
            v-for="(item, index) in activityList"
            :key="index"
        >
          <div class="img-warp">
            <img :src="item.hd_url" alt=""/>
          </div>
          <div class="activity-name">{{ item.hd_name }}</div>
          <div class="activity-desc">
            {{item.hd_desc }}
          </div>
          <div
              class="activity-detail"
              @click="orderActivity(item.id)"
          >
            立即报名
          </div>
          <div class="activity-price">
           <!-- <span class="number">已有222人报名</span>-->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'newActivity',
  components: {
    /**/
  },
  data() {
    return {
      account: '',
      itemList: [],
      statusTab: ['全部','进行中', '已结束'],
      statusSel: 0,
      hotSel: 0,
      hotTab:['全部','最新','最热'],
      activityList: []
    };
  },
  watch: {
    /**/
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$api.ajaxData({
        pathName: 'getNewActivityList',
        params: {
          status: this.statusSel,
          hot: this.hotSel
        },
        authorization: true,
      }).then(res => {
        console.log(res);
        this.activityList = res.obj;
      }).catch(()=>{
          this.activityList = [];
      })
    },
    changeTab(tab,index){
      this[tab]=index;
      this.getList()
    },
    //报名
    orderActivity(id) {
        let st_id = this.$api.getAccount().id;
        if(!st_id) this.$router.push({ name: 'login' });
        this.$api.ajaxData({
            pathName: 'doApplyHd',
            authorization: true,
            params: {
                hd_id: id,
                st_id: st_id
            }
        }).then(res => {
            this.$util.alert(res.msg);
            this.getList()
        })
    }
  }
};
</script>
<style scoped lang="scss">
.contain {
  .m-itemize {
    position: relative;
    padding: 0 0 10px;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    z-index: 1;

    .itemize-contain {
      max-width: 1366px;
      display: flex;
      min-height: 70px;
      padding: 10px 0;
      margin: 0 auto;
      align-items: center;
      box-sizing: border-box;

      &:not(:last-child) {
        border-bottom: 1px solid #f2f2f2;
      }

      .itemize-name {
        flex: 0 0 80px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
      }

      .itemize-list {
        position: relative;
        display: flex;
        padding: 0 0 0 95px;
        flex-wrap: wrap;
        font-size: 13px;
        color: #333;

        li {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            box-shadow: 2px 2px 10px rgba(242, 242, 242, 1);
          }
          &:first-child {
            position: absolute;
            left: 0;
            top: 50%;
            width: 80px;
            margin: -15px 0 0 0;
          }

          &.active {
            color: #0079fe;
            background: #b3d7ff;
          }
        }
      }
    }
  }

  .m-result-contain {
    padding: 20px 0 0;

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;

      .activity-intro {
        position: relative;
        width: 23%;
        margin: 0 1% 20px;
        padding: 12px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid rgba(242, 242, 242, 1);
        overflow: hidden;

        .img-warp {
          position: relative;
          width: 100%;
          padding-top: 55.5%;
          background: rgba(242, 242, 242, 1);

          img {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .activity-name {
          margin: 15px 0 0;
          height: 24px;
          font-size: 16px;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #000;
        }

        .activity-desc {
          margin-bottom: 20px;
          font-size: 14px;
          color: #999999;
          @include ellipsis-line;
        }

        .activity-detail {
          float: right;
          width: 132px;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
          font-size: 13px;
          cursor: pointer;
          color: #fff;
          background: #ff8080;
          text-align: left;
          margin-right: -25px;
          padding-left: 25px;
        }

        .activity-price {
          display: flex;
          line-height: 22px;
          font-weight: 700;
          font-style: normal;
          font-size: 14px;
          color: #999999;


        }
      }
    }
  }
}
</style>
